<template>
	<div>
		<!-- 顶部两项统计面板 -->
		<div class="flex">
			<div class="echars-pan bg-white w-100 mx-1">
				<div class="flex align-center justify-between echars-title">
					<div class="font-weight-bold font-md">
						月度营收占比
					</div>
					<div>
						<a-icon type="dash" />
					</div>
				</div>
				<div ref="myChart" id="echars"></div>
			</div>
			<div class="echars-pan bg-white w-100 mx-1">
				<div class="flex align-center justify-between echars-title">
					<div class="font-weight-bold font-md">
						月度人次占比
					</div>
					<div>
						<a-icon type="dash" />
					</div>
				</div>
				<div ref="myChart2" id="echars"></div>
			</div>
		</div>
		<!--底部统计面板  -->
		<div class="bottom" style="margin-right: 10px;">
			<div class="bottom-title font-weight-bold font-md text-left">
				月度营收交易情况
			</div>
			<div class="total-pan flex text-left">
				<div class="font-smaller px-2 text-muted">
					<div>月度营收金额</div>
					<div class="text-black font-md">{{n_monthTotal.money}} <span
							class="text-muted font-smaller">元</span></div>
				</div>
				<div class="font-smaller px-2 border-left text-muted">
					<div>月度就餐人数</div>
					<div class="text-black font-md">{{n_monthTotal.peo}}</div>
				</div>
			</div>
			<div ref="myChart3" id="btmechars"></div>
		</div>
	</div>
</template>

<script>
	import echarts from "echarts"
	export default {
		data() {
			return {
				n_monthTotal: {
					money: '0',
					peo: '0'
				}
			};
		},
		mounted() {
			this.draw();
			this.draw2();
			this.draw3();
		},
		methods: {
			//绘制统计图
			draw() {
				var myChart = echarts.init(this.$refs.myChart);
				let echartData = [{
						name: "早餐",
						value: "3078"
					},
					{
						name: "午餐",
						value: "5621"
					},
					{
						name: "晚餐",
						value: "1747"
					}
				];
				let formatNumber = function(num) {
					let reg = /(?=(\B)(\d{3})+$)/g;
					return num.toString().replace(reg, ',');
				}
				let total = echartData.reduce((a, b) => {
					return a + b.value * 1
				}, 0);
				let option = {
					color: ['#fbd337', ' #3aa0ff', '#f2637b'],
					// tooltip: {
					// 	trigger: 'item'
					// },
					title: [{
						text: '{name|营收额}\n{val|￥' + formatNumber(total) + '}',
						bottom: '50%',
						left: 'center',
						textStyle: {
							rich: {
								name: {
									fontSize: 15,
									fontWeight: 500,
									color: '#D3D3D3',
									padding: [10, 0]
								},
								val: {
									fontSize: 22,
									fontWeight: 500,
									color: '#333333',
								}
							}
						}
					}, {
						text: '就餐营收',
						top: 20,
						left: 20,
						textStyle: {
							fontSize: 17,
							color: '#000000',
							fontWeight: 800
						}
					}],
					series: [{
						type: 'pie',
						radius: ['42%', '55%'],
						center: ['50%', '50%'],
						data: echartData,
						bottom: "70",
						// hoverAnimation: false,
						itemStyle: {
							normal: {
								borderColor: '#fff',
								borderWidth: 4
							}
						},
						// 指示线
						labelLine: {
							normal: {
								length: 20,
								length2: 20,
								lineStyle: {
									color: '#D3D3D3'
								}
							}
						},
						// 指示标
						label: {
							normal: {
								formatter: params => {
									return (
										// '{icon|●}{name|' + params.name + '}{value|' +
										// formatNumber(params.value) + '}';
										'{value|￥' + formatNumber(params.value) + '}\n{name|' +
										params.name + '}'
									);
								},
								rich: {
									icon: {
										fontSize: 22,
										align: 'center',
									},
									name: {
										fontSize: 14,
										padding: [0, 10, 0, 4],
										color: '#666666',
										align: 'center',
									},
									value: {
										fontSize: 14,
										fontWeight: 500,
										color: '#000000',
										align: 'center',
									}
								},
								textStyle: {
									fontSize: 14,
									color: '#000000',
									fontWeight: 500
								}
							}
						},
					}],
					legend: {
						icon: "circle",
						orient: 'horizontal',
						// x: 'left',
						data: ['早餐', '午餐', '晚餐'],
						bottom: 85,
						textStyle: {
							color: "#000"
						},
						itemGap: 80
					},
				};
				myChart.setOption(option);
				//当浏览器窗口缩小的时候缩小
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			draw2() {
				var myChart = echarts.init(this.$refs.myChart2);
				let echartData = [{
						name: "早餐",
						value: "307"
					},
					{
						name: "午餐",
						value: "561"
					},
					{
						name: "晚餐",
						value: "174"
					}
				];
				let formatNumber = function(num) {
					let reg = /(?=(\B)(\d{3})+$)/g;
					return num.toString().replace(reg, ',');
				}
				//计算总数
				let total = echartData.reduce((a, b) => {
					return a + b.value * 1
				}, 0);
				let option = {
					color: ['#fbd337', ' #3aa0ff', '#f2637b'],
					// tooltip: {
					// 	trigger: 'item'
					// },
					title: [{
						text: '{name|就餐人次}\n{val|' + formatNumber(total) + '次}',
						bottom: '50%',
						left: 'center',
						textStyle: {
							rich: {
								name: {
									fontSize: 15,
									fontWeight: 500,
									color: '#D3D3D3',
									padding: [10, 0]
								},
								val: {
									fontSize: 22,
									fontWeight: 500,
									color: '#333333',
								}
							}
						}
					}, {
						text: '就餐人次',
						top: 20,
						left: 20,
						textStyle: {
							fontSize: 17,
							color: '#000000',
							fontWeight: 800
						}
					}],
					series: [{
						type: 'pie',
						radius: ['42%', '55%'],
						center: ['50%', '50%'],
						data: echartData,
						bottom: "70",
						// hoverAnimation: false,
						itemStyle: {
							normal: {
								borderColor: '#fff',
								borderWidth: 4
							}
						},
						// 指示线
						labelLine: {
							normal: {
								length: 20,
								length2: 20,
								lineStyle: {
									color: '#D3D3D3'
								}
							}
						},
						// 指示标
						label: {
							normal: {
								formatter: params => {
									return (
										// '{icon|●}{name|' + params.name + '}{value|' +
										// formatNumber(params.value) + '}';
										'{value|' + formatNumber(params.value) + '次}\n{name|' +
										params.name + '}'
									);
								},
								rich: {
									icon: {
										fontSize: 22,
										align: 'center',
									},
									name: {
										fontSize: 14,
										padding: [0, 10, 0, 4],
										color: '#666666',
										align: 'center',
									},
									value: {
										fontSize: 14,
										fontWeight: 500,
										color: '#000000',
										align: 'center',
									}
								},
								// textStyle: {
								// 	fontSize: 14,
								// 	color: '#000000',
								// 	fontWeight: 500
								// }
							}
						},
					}],
					legend: {
						icon: "circle",
						orient: 'horizontal',
						// x: 'left',
						data: ['早餐', '午餐', '晚餐'],
						bottom: 85,
						textStyle: {
							color: "#000"
						},
						itemGap: 80
					},
				};
				myChart.setOption(option);
				//当浏览器窗口缩小的时候缩小
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
			draw3() {
				var myChart = echarts.init(this.$refs.myChart3);
				let xdata = ['10:00', '10:00', '10:00', '10:00', '10:00', '10:00', '10:00'];
				let ydata1 = [100, 10, 30, 12, 15, 3, 7];
				let ydata2 = [150, 120, 170, 140, 500, 160, 110];

				//计算数组元素相加后的总和
				this.n_monthTotal.money = ydata1.reduce((a, b) => {
					return a + b;
				}, 0);
				this.n_monthTotal.peo = ydata2.reduce((a, b) => {
					return a + b;
				}, 0);
				let option = {
					backgroundColor: '#fff',
					// 统计图标识
					legend: {
						icon: 'circle',
						top: '10%',
						right: '5%',
						itemWidth: 20,
						itemGap: 50,
						textStyle: {
							color: '#9f9f9f',
							fontWeight: 800
						}
					},
					// 提示框
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							lineStyle: {
								width: 0
							}
						},
						backgroundColor: '#fff',
						textStyle: {
							color: '#5c6c7c'
						},
						padding: [10, 10],
						extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)'
					},
					// 直角坐标系
					grid: {
						top: '27%',
						left: "4.5%",
						right: "4.5%"
					},
					// 直角坐标系 grid 中的 x 轴
					xAxis: [{
						type: 'category',
						data: xdata,
						axisLine: {
							lineStyle: {
								color: '#d9d9d9',
							}
						},
						axisTick: {
							show: true
						},
						axisLabel: {
							interval: 0,
							textStyle: {
								color: '#556677'
							},
							// 默认x轴字体大小
							fontSize: 12,
							// margin:文字到x轴的距离
							margin: 15
						},
						boundaryGap: false
					}],
					// 直角坐标系 grid 中的 y 轴
					yAxis: [{
						type: 'value',
						axisTick: {
							show: false
						},
						axisLine: {
							show: true,
							lineStyle: {
								color: '#DCE2E8'
							}
						},
						axisLabel: {
							textStyle: {
								color: '#556677',
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								type: 'dashed',
							},
						}
					}],
					series: [{
							name: '营收金额',
							type: 'line',
							data: ydata1,
							symbol: 'circle',
							smooth: true,
							yAxisIndex: 0,
							showSymbol: false,
							lineStyle: {
								width: 5,
							},
							itemStyle: {
								normal: {
									color: '#1890FF',
									borderColor: '#1890FF'
								}
							}
						},
						{
							name: '就餐人次',
							type: 'line',
							data: ydata2,
							yAxisIndex:0,
							symbol: 'circle',
							smooth: true,
							showSymbol: false,
							lineStyle: {
								width: 5,
							},
							itemStyle: {
								normal: {
									color: '#42c86a',
									borderColor: '#42c86a'
								}
							}
						}
					]
				};



				myChart.setOption(option);
				//当浏览器窗口缩小的时候缩小
				window.addEventListener("resize", () => {
					myChart.resize();
				});
			},
		}
	};
</script>

<style scoped="scoped">
	.echars-pan {
		height: 454px;
	}

	.echars-title {
		height: 55px;
		line-height: 55px;
		border-bottom: 1px solid #E8E8E8;
		padding: 0 24px;

	}

	#echars {
		height: 454px;
		/* background-color: #0056B3; */
	}

	#btmechars {
		height: 430px;
	}

	.bottom {
		position: relative;
		margin: 30px 10px;
		background-color: #FFFFFF;
	}

	.bottom-title {
		height: 55px;
		line-height: 55px;
		border-bottom: 1px solid #E8E8E8;
		padding: 0 42px;
	}

	.total-pan {
		position: absolute;
		z-index: 33;
		top: 15%;
		margin-left: 2.142857rem;
	}
</style>
